import { defineComponent, reactive, toRefs } from "vue";
import style from './index.module.scss'
import { ElIcon } from "element-plus";
import { ArrowDown } from '@element-plus/icons'
export default defineComponent({
  setup() {
    const state = reactive({
      isClick: false
    })
    const handleClickItem = () => {
      state.isClick = !state.isClick
    }
    return {
      ...toRefs(state),
      handleClickItem
    }
  },
  render() {
    const { handleClickItem, isClick } = this
    return (
      <div>
        <ul class={style.memoDropDownWrapper} >
          <li onClick={handleClickItem}>
            <div className={style.memoDropDownTitleWrapper}>
              <div className={style.memoDropDownTitleIcon}>
                <ElIcon >
                  <ArrowDown />
                </ElIcon>
              </div>
              <div className={style.memoDropDownTitle}>清单</div>
            </div>
          </li>

          <ul className={style.memoDropDownContent} style={{ maxHeight: isClick ? '200px' : '0' }}>
            <li >
              <ul>
                {[1, 2, 3, 4, 5, 6].map(el => <li key={el} className={style.memoDropDownItem}>{el}</li>)}
              </ul>
            </li>

          </ul>
        </ul>
      </div>
    )
  }
})